<template>
  <div>{{ counter }}</div>
  <div>{{ doubleCounter }}</div>
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))">
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.id }} - {{ item.name }} - {{ item.completed ? '已完成' : '未完成' }}</span>
  </div>
</template>

<script lang="ts" setup>
// 和 ComputedAndMethods.vue 作对比
import {computed, ref, PropType } from 'vue'
// 类型声明
interface TitleInfo {
  id: number
  name: string
}
// 属性声明：props
// const props = defineProps<{
//   titleInfo: {
//     type: object,
//     require: false
//   }
// }>()
const props = defineProps({
  titleInfo: {
    type: Object as PropType<TitleInfo>,
    required: true
  }
})
// console.log(props.titleInfo)

// 泛型的使用
// function test<T> (arg: T): T {
//   return arg
// }
// console.log(test<string>('sss'))

type Todo = {
  id: number
  name: string
  completed: boolean
}
const counter = ref(1)
const doubleCounter = computed(() => counter.value * 2)

const items = ref([] as Todo[])
items.value.push({
  id: 1,
  name: 'vue3',
  completed: false
})

const todoName = ref('')
const newTodo = (todoName: string): Todo => {
  return {
    id: items.value.length + 1,
    name: todoName,
    completed: false
  }
}

const addTodo = (todo: Todo): void => {
  items.value.push(todo)
  todoName.value = ''
}

</script>

<style lang="scss" scoped>

</style>